<template>
  <el-main>
    <!-- <Introduce msg="Introduce" /> -->
    <div class="cc-display">
      <div class="middleInfo border-none">
        <div class="menuBox border-none">
          <div style="width: 100%; height: 60px" class="cc-display">
            <span class="font22c">个人中心</span>
          </div>
          <MenuList msg="Introduce" v-on:change-menu="changeMenu" />
        </div>
        <div class="myContent">
          <keep-alive>
            <component v-bind:is="currentTab"></component>
          </keep-alive>
        </div>
        <div class="clear-float"></div>
      </div>
    </div>
  </el-main>
</template>

<script>
// @ is an alias to /src
import MenuList from "./MenuList.vue";
import FirstPage from "./FirstPage";
import ArticlePage from "./ArticlePage";

export default {
  name: "Account",
  components: {
    MenuList,
    FirstPage,
    ArticlePage
  },
  data() {
    return {
      currentTab: "firstPage"
    };
  },
  methods: {
    /**
     * @function 菜单切换
     * @param {*} eve
     */
    changeMenu(eve) {
      console.log(eve);
      this.currentTab = eve;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-main {
  padding: 0;
}
#vueMain {
  position: relative;
  width: 100%;
  min-width: 1000px;
  margin: auto;
}

.selectTop {
  width: 100%;
  min-width: 1000px;
  height: 45px;
  background-color: #f6f6f6;
  margin-top: 70px;
}

.middleInfo {
  width: 80%;
  min-width: 1000px;
  margin-top: 40px;
  max-width: 1200px;
  border: 1px solid #99a2aa;
  border-radius: 6px;
  overflow: hidden;
}

.menuBox {
  width: 15%;
  background-color: #f9f9f9;
  float: left;
  border-right: #99a2aa 1px solid;
  height: 600px;
}

.myContent {
  width: 85%;
  height: 600px;
  float: left;
}
</style>
